<template lang="pug">
  .container
    s-table(
      ref="table"
      reqUrl="web/children/page"
      :column="tableObj.column"
      :filterProps="{fields: searchConfig}"
      :queryPropsParams="{areaId: curArea.areaId}"
    )
      .table-operator(slot="table-operator")
        el-button.gradientVertical(size="large"  @click="addHandle()" round) 新增
      template(slot="action" slot-scope="text, scope")
        template
          el-link(@click="addHandle(scope.id, 'view')" type="info") 查看
          el-link( v-if="scope.status === 1 || scope.status === 2" @click="addHandle(scope.id, 'edit')" type="primary") 修改
          el-link( v-if="scope.status === 1" @click="addHandle(scope.id, 'delete')" type="danger") 退学
          el-popconfirm(
            title="您确认对该名学生进行毕业操作吗?"
            @confirm="() => graduateHandle(scope.id)"
            @onConfirm="() => graduateHandle(scope.id)"
          )
            el-link(slot="reference" v-if="scope.status === 1" type="danger") 毕业

      template(slot="birthday" slot-scope="text, scope")
        span {{text | dateFilter('YYYY/MM/DD')}}
      template(slot="status" slot-scope="text, scope")
        el-tag(size="mini" :type="text | stautsFilter('type')") {{text | stautsFilter('name')}}
    DetailDrawer(:visible.sync="addObj.visible" :id="addObj.id" :type="addObj.type" @getList="refreshTable")
    modal-form(
      title="退学"
      :visible.sync="dropOutVisible"
      :fields="addField"
      :submitHandle="addSubmit"
      :submitting="addSubmitting"
      :layoutCol="{ sm: 24, md: 24, lg: 24 }"
    )
</template>
<script>
import { mapGetters } from 'vuex'
import { columnConfig, statusList } from './config'
import DetailDrawer from '../components/detailDrawer'
import { getClassesByArea,ssoCodeVerify } from '@/api/common'
import { dropOut, graduate } from '../api'
export default {
  components: {
    DetailDrawer
  },
  filters: {
    stautsFilter (val, key) {
      const status = statusList.find(x => x.id === val?.toString()) || {}
      return status[key] || ''
    }
  },
  data () {
    return {
      tableObj: {
        column: columnConfig
      },
      addObj: {
        id: '',
        type: 'add',
        visible: false
      },
      classes: [],
      classId: '',

      statusList: statusList,
      dropOutVisible: false,
      addSubmitting: false
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    searchConfig () {
      return [
        {
          key: 'name',
          label: '宝宝姓名'
        },
        {
          label: '选择班级',
          key: 'classId',
          type: 'select',
          fieldProps: {
            options: this.classes,
            props: { value: 'id', label: 'name' }
          }
        },
        {
          key: 'status',
          label: '状态',
          type: 'select',
          fieldProps: {
            options: this.statusList,
            props: { value: 'id', label: 'name' }
          },
          initialValue: '1'
        }
      ]
    },

    addField () {
      return [
        {
          key: 'reason',
          label: '退学原因',
          rules: [{ required: true, message: '请输入' }]
        }
      ]
    }
  },
  created () {
    this.getClasses()
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    addHandle (id = '', type = 'add') {
      this.$prompt('', '授权码验证', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder:'请输入授权码',
        inputValidator: (value) => {
          // 检查是否为空
          if (!value || value.trim() === '') {
            return '请输入授权码';
          }
          // 检查是否仅包含数字
          if (!/^\d+$/.test(value.trim())) {
            return '授权码只能输入数字';
          }
          return null;
        },
        beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
             ssoCodeVerify({
               code:instance.inputValue
             }).then(res => {
               instance.confirmButtonLoading = false;
               if(res==0){
                  this.$message.error('验证失败')
               }else{
                 this.$message.success('验证成功')
                 done();

               }
             }).catch(() => {
                  instance.confirmButtonLoading = false;
                  return false; // 阻止关闭
                });
            } else {
              instance.confirmButtonLoading = false;
              done(); // 取消操作直接关闭
            }
          }
      }).then(({ value }) => {
          setTimeout(()=>{
              if (type === 'delete') {
                this.addObj = {
                  id,
                  type,
                  visible: false
                }
                this.dropOutVisible = true
                return
              }
              this.addObj = {
                id,
                type,
                visible: true
              }
          },500)
      })

    },

    // 获取托班班级列表
    async getClasses () {
      const { curArea } = this
      this.classes = await (getClassesByArea({ areaId: curArea.areaId }) || [])
      this.classId = this.classes[0]?.id || ''
      // this.change(this.classId)
    },

    addSubmit (values) {
      console.log(values)
      const { id: childrenId } = this.addObj
      const { areaId } = this.curArea
      const { reason } = values

      const params = {
        childrenId,
        areaId,
        reason,
        backMoney: 0
      }
      console.log(params)
      this.addSubmitting = true
      dropOut(params).then(res => {
        console.log(res)
        this.refreshTable()
      }).finally(() => {
        this.addSubmitting = false
        this.dropOutVisible = false
      })
    },

    graduateHandle (childrenId) {
      const { areaId } = this.curArea
      const params = {
        childrenId,
        areaId
      }
      graduate(params).then(res => {
        console.log(res)
        this.refreshTable()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .container{
    padding: 30px;
    background: #FFFFFF;
  }
</style>
